<script setup>
import {ref, h, inject, defineProps} from "vue";
import {
  Search as searchIcon
} from '@vicons/ionicons5'
import {getClassByClassName} from "@/res/api/class_api.js";
import {BlogSelect} from "@/res/api/blog_api.js";
import {selModel} from "@/res/api/model_api.js";
const {toPage} = inject("toPage")

let props = defineProps({
  searchType: {
    required: true,
    type: String,
    default: '文章搜索'
  }
})

let searchValue = ref('')
const searchInt = ref(null)
watch(searchValue,(newValue) =>{
  console.log(newValue)
  if (/^-?\d+(\.\d+)?$/.test(newValue)){
    searchInt.value = newValue
    console.log("int:"+searchInt.value)
  }
})

// 课程搜索
let classRef = ref([])
async function searchClick() {
  try {
    const res = await getClassByClassName({
      classType: searchValue.value,
      classTitle: searchValue.value
    });
    // 确保res.data和res.data.list存在，避免潜在的错误
    if (res && res.data && res.data.list) {
      classRef.value = res.data.list;
    } else {
      throw new Error('Unexpected response format');
    }
  } catch (e) {
    // 处理错误
    classRef.value=false
    // $message.error('搜索课程时发生错误: ' + e.message);
  }
}

// 文章搜索 TODO: 检查得到的预期对象从而查看更详细的信息
let blogRef = ref([])
async function getBlogSelect(){
  try {
    const res = await BlogSelect({
      title: searchValue.value,
      id: searchInt.value,
      content: searchValue.value
    });
    console.log(res)
    // 确保res.data和res.data.list存在，避免潜在的错误
    if (res && res.data.length>0)  {
      console.log(res)
      blogRef.value = res.data;
    } else {
      throw new Error('Unexpected response format');
    }
  } catch (e) {
    console.log(e)
    blogRef.value=false
    // $message.error('搜索文章时发生错误: ' + e.message);
  }
}

// 模型搜索
let modelRef = ref([])
async function selModelBy(){
  try {
    const res = await selModel({
      modelName: searchValue.value,
      modelNub: searchInt.value,
      introduce: searchValue.value
    });
    console.log(res)
    // 确保res.data和res.data.list存在，避免潜在的错误
    if (res && res.data.length>0) {
      modelRef.value = res.data;
    } else {
      throw new Error('Unexpected response format');
    }
  } catch (e) {
    modelRef.value=false
    // $message.error('搜索模型时发生错误: ' + e.message);
  }
}

// 选择使用那个搜索
async function CilkSearch() {
  try {
    if (props.searchType === '课程搜索') {
      console.log("searchType:", props.searchType);
      await searchClick(); // 等待异步操作完成
    } else if (props.searchType === '文章搜索') {
      console.log("searchType:", props.searchType);
      await getBlogSelect(); // 等待异步操作完成
    } else if (props.searchType === '模型搜索') {
      console.log("searchType:", props.searchType);
      await selModelBy(); // 等待异步操作完成
    }
  } catch (error) {
    // 这里可以处理整个CilkSearch过程中可能出现的异常
    $message.error('搜索过程中发生错误：' + error.message);
  }
}




// 抽屉
// const searchIcon = {
//   template: `<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" aria-hidden="true">`
// }

const active = ref(false);
function showDrawerClick(){
  active.value=true
}

watch(active,newVal=>{
  if(newVal===false){
    searchValue.value=''
    searchInt.value=''
    modelRef.value=null
    classRef.value=null
    blogRef.value=null
  }
})

</script>

<template>
  <n-input-group @click="showDrawerClick">
    <n-input
        @click="showDrawerClick"
        placeholder="搜索框"
        value=""
        round >
      <template #prefix>
        <n-icon :component="searchIcon"/>
      </template>
      <template #suffix>
        课程搜索
      </template>
    </n-input>
  </n-input-group>
  <n-drawer v-model:show="active" :width="480" height="21rem" placement="top">
    <n-drawer-content title="search">
      <n-scrollbar  style="max-height: 500px" >
      <n-input-group @click="showDrawerClick">
        <n-input-group-label >{{props.searchType}}</n-input-group-label>
        <n-input
            @click="showDrawerClick"
            @keyup.enter="CilkSearch"
            placeholder="搜索框"
            v-model:value="searchValue"
        >
          <template #prefix>
            <n-icon :component="searchIcon"/>
          </template>
        </n-input>
        <n-button type="info" style="width: 12rem"  @click="CilkSearch">搜索</n-button>
      </n-input-group>
        <!-- 课程的 -->
       <n-list v-if="props.searchType==='课程搜索'" hoverable clickable>
          <n-list-item v-if="classRef"
                       v-for="(item, index) in classRef"
                       :key="index"
                       @click="toPage('std/curriculum/show', {classId:item.id,node:item.classNode,type:'class'}, false)">
            <n-thing :title="item.classTitle" content-style="margin-top: 10px;">
              <n-space size="small" style="margin-top: 4px">
                <n-tag :bordered="false" type="info" size="small">
                  节点：{{ item.classNode }}
                </n-tag>
                <n-tag :bordered="false" type="info" size="small">
                  来源：{{ item.classSource }}
                </n-tag>
              </n-space>
            </n-thing>
          </n-list-item>
         <n-empty v-else description="没有搜索结果"></n-empty>
        </n-list>

        <!-- 文章的 -->
        <n-list v-else-if="props.searchType==='文章搜索'" hoverable clickable>
          <n-list-item v-if="blogRef"
                       v-for="(item, index) in blogRef"
                       :key="index"
                       @click="toPage('std/forum/show', {postsId: item.id,uuid:item.uuid,type:'posts'}, false)">
            <n-thing :title="item.title" content-style="margin-top: 10px;">
              <n-space size="small" style="margin-top: 4px">
                <n-tag :bordered="false" type="info" size="small">
                  点赞：{{ item.likesNub }}
                </n-tag>
                <n-tag :bordered="false" type="info" size="small">
                  收藏：{{ item.collectNub }}
                </n-tag>
                <n-tag :bordered="false" type="info" size="small">
                  浏览量：{{ item.views }}
                </n-tag>
                <n-tag :bordered="false" type="info" size="small">
                  作者id：{{ item.uuid }}
                </n-tag>
              </n-space>
            </n-thing>
          </n-list-item>
          <n-empty v-else description="没有搜索结果"></n-empty>
        </n-list>

        <!-- 模型的 -->
        <n-list v-else hoverable clickable>
          <n-list-item v-if="modelRef"
                       v-for="(item, index) in modelRef"
                       :key="index" @click="toPage('std/model/specific')">
            <n-thing :title="item.modelName" content-style="margin-top: 10px;">
              <n-space size="small" style="margin-top: 4px">
                <n-tag :bordered="false" type="info" size="small">
                  别称：{{ item.modelEnglishName }}
                </n-tag>
                <n-tag :bordered="false" type="info" size="small">
                  模型编号：{{ item.modelNub }}
                </n-tag>
              </n-space>
            </n-thing>
          </n-list-item>
          <n-empty v-else description="没有搜索结果"></n-empty>
        </n-list>

      </n-scrollbar>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>

</style>
